<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文章列表</title>
  <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/JZPagination.js"></script>
  <style>
    #pageBar {
      font-size: 14px;
    }

    #pageBar a, span {
      border: 1px solid #000;
      padding: 3px 10px;
      margin: 3px 2px;
      color: #000;
      background-color: whitesmoke;
      text-decoration: none;
    }

    #pageBar a:hover {
      color: #fff;
      background-color: #0094ff;
    }

    #pageBar select {
      margin: 5px;
    }

    #pageBar a.active {
      color: #fff;
      background-color: #0094ff;
    }
  </style>
</head>

<body>
<div class="container-fluid">
  <div class="common_title">
    文章列表
  </div>
  <div class="container-fluid common_con">
    <div class="row opt_btns">
      <div class="col-xs-6">
        <form class="form-inline">
          <select id="selCategory" name="" class="form-control input-sm">
            <!--            <option>所有分类</option>-->
            <!--            <option>未分类</option>-->
            <!--            <option>奇趣事</option>-->
            <!--            <option>会生活</option>-->
            <!--            <option>爱旅行</option>-->
          </select>
          <select id="selStatus" name="" class="form-control input-sm">
            <option value="">所有状态</option>
            <option value="草稿">草稿</option>
            <option value="已发布">已发布</option>
          </select>
          <button id="btnSearch" class="btn btn-default btn-sm">筛选</button>
        </form>
      </div>
      <div class="col-xs-6">
        <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
      </div>
    </div>

    <table class="table table-striped table-bordered table-hover mp20">
      <thead>
      <tr>
        <th>标题</th>
        <th>作者</th>
        <th>分类</th>
        <th class="text-center">发表时间</th>
        <th class="text-center">状态</th>
        <th class="text-center" width="100">操作</th>
      </tr>
      </thead>
      <tbody>


      <tr>

        <td>王积千造统最头</td>
        <td>杰克</td>
        <td>奇趣事</td>
        <td class="text-center">2017-06-08 07:08:46</td>


        <td class="text-center">已发布</td>


        <td class="text-center">
          <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 1005 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>级电使正回</td>
        <td>肉丝</td>
        <td>爱旅行</td>
        <td class="text-center">2017-06-06 10:45:24</td>


        <td class="text-center">已发布</td>


        <td class="text-center">
          <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 1004 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>近难领管年算</td>
        <td>杰克</td>
        <td>会生活</td>
        <td class="text-center">2017-05-27 16:49:04</td>


        <td class="text-center">已发布</td>


        <td class="text-center">
          <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 1003 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>龙大实究</td>
        <td>杰克</td>
        <td>未分类</td>
        <td class="text-center">2017-04-13 10:43:41</td>


        <td class="text-center">草稿</td>


        <td class="text-center">
          <a href="post-edit.html?id=1002" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 1002 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>算性得走来拉</td>
        <td>肉丝</td>
        <td>奇趣事</td>
        <td class="text-center">2017-04-06 04:58:12</td>


        <td class="text-center">已发布</td>


        <td class="text-center">
          <a href="post-edit.html?id=1001" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 1001 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>几平会出气</td>
        <td>管理员</td>
        <td>奇趣事</td>
        <td class="text-center">2017-04-03 20:16:34</td>


        <td class="text-center">草稿</td>


        <td class="text-center">
          <a href="post-edit.html?id=1000" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 1000 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>世团先证型角</td>
        <td>杰克</td>
        <td>奇趣事</td>
        <td class="text-center">2017-04-03 14:40:08</td>


        <td class="text-center">已发布</td>


        <td class="text-center">
          <a href="post-edit.html?id=999" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 999 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>构更反步五</td>
        <td>肉丝</td>
        <td>奇趣事</td>
        <td class="text-center">2017-03-30 22:31:52</td>


        <td class="text-center">已发布</td>


        <td class="text-center">
          <a href="post-edit.html?id=998" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 998 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>组方些</td>
        <td>肉丝</td>
        <td>会生活</td>
        <td class="text-center">2017-02-08 05:38:43</td>


        <td class="text-center">草稿</td>


        <td class="text-center">
          <a href="post-edit.html?id=996" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 996 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      <tr>

        <td>日做发光成</td>
        <td>管理员</td>
        <td>爱旅行</td>
        <td class="text-center">2017-01-26 22:19:59</td>


        <td class="text-center">草稿</td>


        <td class="text-center">
          <a href="post-edit.html?id=995" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:deleteTr( 995 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>


      </tbody>
    </table>
    <!--    <div class="row text-center">-->
    <!--      <ul class="pagination pagination-sm">-->
    <!--        <li class="page-item first disabled">-->
    <!--          <a href="#" class="page-link">首页</a>-->
    <!--        </li>-->
    <!--        <li class="page-item prev disabled">-->
    <!--          <a href="#" class="page-link">上一页</a>-->
    <!--        </li>-->
    <!--        <li class="page-item active">-->
    <!--          <a href="#" class="page-link">1</a>-->
    <!--        </li>-->
    <!--        <li class="page-item">-->
    <!--          <a href="#" class="page-link">2</a>-->
    <!--        </li>-->
    <!--        <li class="page-item">-->
    <!--          <a href="#" class="page-link">3</a>-->
    <!--        </li>-->
    <!--        <li class="page-item">-->
    <!--          <a href="#" class="page-link">4</a>-->
    <!--        </li>-->
    <!--        <li class="page-item">-->
    <!--          <a href="#" class="page-link">5</a>-->
    <!--        </li>-->
    <!--        <li class="page-item">-->
    <!--          <a href="#" class="page-link">6</a>-->
    <!--        </li>-->
    <!--        <li class="page-item">-->
    <!--          <a href="#" class="page-link">7</a>-->
    <!--        </li>-->
    <!--        <li class="page-item next">-->
    <!--          <a href="#" class="page-link">下一页</a>-->
    <!--        </li>-->
    <!--        <li class="page-item last">-->
    <!--          <a href="#" class="page-link">尾页</a>-->
    <!--        </li>-->
    <!--      </ul>-->
    <!--    </div>-->

    <!-- 1.页码条 容器标签 -->
    <div id='pageBar'></div>
  </div>
</div>

<script src="js/template-web.js"></script>
<script>
  // 设置左侧菜单
  $('#release_btn').click(function () {
    window.parent.setMenu(1, 1);
  })
</script>
<script id="articleList" type="text/html">
  {{each data}}
  <tr>
    <td>{{$value.title}}</td>
    <td>{{$value.author}}</td>
    <td>{{$value.category}}</td>
    <td class="text-center">{{$value.date}}</td>
    <td class="text-center">{{$value.state}}</td>
    <td class="text-center">
      <a href="article_edit.html?id={{$value.id}} " class="btn btn-default btn-xs edit" data-id="{{$value.id}} ">编辑</a>
      <a href="javascript:deleteTr( '{{$value.id}}');" class="btn btn-danger btn-xs delete">删除
      </a>
    </td>
  </tr>
  {{/each}}
</script>

<script id="categoryList" type="text/html">
  <option value="">所有分类</option>
  {{each data}}
  <option value="{{$value.id}}">{{$value.name}}</option>
  {{/each}}
</script>

<script !src="">
  let searchInfo = { key: '', type: '', state: '', page: 1, perpage: 6 };

  function categoryList() {
    $.ajax({
      url: 'http://localhost:8080/admin/category/list',
      method: 'get',
      dataType: 'json',
      data: {},
      success: function (data) {
        console.log('categoryList ajax结果', data);
        if (data.code === 200) {
          let selectHtml = template('categoryList', data);
          $('#selCategory').html(selectHtml)
        } else {
          alert(data.msg)
        }
      }
    })
  }

  function search({ key = '', type = '', state = '', page = 1, perpage = 6 }) {
    // page = page || 1;
    // perpage = perpage || 6;
    searchInfo = { key, type, state, page, perpage };
    $.ajax({
      url: 'http://localhost:8080/admin/article/query',
      method: 'get',
      dataType: 'json',
      data: {
        key: key,
        type: type,
        state: state,
        page: page,
        perpage: perpage
      },
      success: function (data) {
        console.log('articleList ajax结果', data);
        if (data.code === 200) {
          //todo 分页使用
          data.data.totalPage;
          data.data.totalCount;
          //todo 分页
          makePageBar({
            pageFunc: toPage,
            pageContainer: 'pageBar',
            pgIndex: page,
            pgSize: perpage,
            roCount: data.data.totalCount,
            simpleModel: true
          });
          // categoryId: 3
          // content: "<p>dfdsfsd</p>"
          // cover: "http://localhost:8080/0c31b1632218061570097d4306f823d3"
          // read: 0
          let tbodyHtml = template('articleList', data.data);
          $('tbody').html(tbodyHtml);
        } else {
          alert(data.msg)
        }
      }
    })
  }

  function deleteTr(id) {
    $.ajax({
      url: 'http://localhost:8080/admin/article/delete',
      method: 'get',
      dataType: 'json',
      data: {
        'id': id
      },
      success: function (data) {
        console.log('ajax结果', data);
        if (data.code === 204) {
          search();
        } else {
          alert(data.msg)
        }
      }
    })
  }

  /**
   * @description: 3. 翻页方法
   * @param {string}  pageIndex - 要前往的页码
   */
  function toPage(pageIndex) {
    searchInfo.page = pageIndex;
    search(searchInfo)
  }

  $(function () {

    search({});
    categoryList();
    //文章筛选
    $('body').on({
      click: function (e) {
        // 动态委派
        let type = $("#selCategory").val();
        let state = $('#selStatus').val();
        search({ type: type, state: state });
        e.preventDefault();
      }
    }, '#btnSearch');

    //

  })
</script>
</body>

</html>